<template>
  <tr>
    <th><input type="checkbox" @click="checkbox" v-model="checked" /></th>
    <th>{{ name }}</th>
    <th>{{ price }}</th>
    <th>
      <button @click="sub">-</button>{{ num }} <button @click="add">+</button>
    </th>
    <th>{{ price * num }}</th>
    <th><button @click="del">删除</button></th>
  </tr>
</template>

<script>
export default {
  props: ['name', 'price', 'num', 'index', 'checked'],
  methods: {
    checkbox() {
      this.$emit('check', this.index)
    },
    sub() {
      this.$emit('sub', this.index)
    },
    add() {
      this.$emit('add', this.index)
    },
    del() {
      this.$emit('del', this.name)
    },
  },
}
</script>

<style scoped>
th {
  font-weight: 400;
}
</style>
